<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        section {
            display: flex;
            background-color: #ddd;
            width: 500px;
            height: 300px;
            outline: 5px solid yellow;
        }

        .left-side {
            background-color: red;
            width: 50px;
            flex: 1 0 100px
        }

        .content {
            flex: 2 0 120px;
            /*max-width: 140px;*/
        }

        .right-side {
            background-color: blue;
            flex: 3 0 160px;
        }

        /*
          当子项目的flex-grow总和大于>=1时
          sum = 1 + 2 +3 = 6;

          剩余宽度 = 500px - 100px - 120px - 160px =  120px

          分配的剩余宽度：
          left：120px * 1/6 = 20px
          content: 120px * 2/6 = 40px
          right: 120px * 3/6 = 60px

          最终宽度：

          left：100px + 20px = 120px
          content：120px + 40px = 160px
          right：160px + 60px = 220px

         注意：flex-grow 会受到 max-width 的影响。如果最终 grow 后的元素的宽度结果大于 max-width 指定的值，max-width 的值将会优先使用。
         多出来的依然按照grow比例分配给其他子项目
        */
    </style>
</head>
<body>
<section>
    <div class="left-side">left-side</div>
    <div class="content">content</div>
    <div class="right-side">right-side</div>
</section>
</body>
</html>
